<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
</head>
<style>
    *{
        font-size: 20px;
    }
    #main{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: bisque;
    }
    form{
        width: 400px;
        height: 300px;
       background-image: linear-gradient(rgb(17, 92, 77),rgb(173, 243, 173));
        display: flex;
        flex-direction: column; 
        align-items: center;
        border-radius: 20px;
        box-shadow: 10px 10px 30px;
    }
    input{
        border-radius: 3px;
        border: 0px;
        padding: 5px;
        outline: none;
    }
    input:hover{
        background-color: rgb(211, 237, 228);
    }

    form>div{
        margin-top: 10px;
    }  

</style>

<script>

    alert("只能给川邮的学生用");

    function login(){
    //通过id获取到name输入框
    let nameinput = document.getElementById("nameinput");
    //通过判断name输入的框中的值的长度
    if(nameinput.value.length !=11){
        alert ("手机号错误")
        return
    }
    
    else{
        alert("你的手机号是OK的");
    }
//-----验证密码框

    let pswdinput = document.getElementById("pswdinput");
    if(pswdinput.value.length < 6){
        alert ("你的密码不符合要求");
        return
    }
    //---验证 验证码
    let yzminput = document.getElementById("yzminput");
    if(yzminput.value.length !=6){
        alert ("你的验证码不符合要求");
        return
    }
    window.location.href="./index.html"
    alert("登录成功")
    }
</script>



<body>
    <div id="main">
        <form > 
            <h1 style="color: aliceblue;">这是注册页面</h1>
            <hr style="width: 90%;">
            <div>
                <label for="">手机号:</label>
                <input type="text" id="nameinput">
            </div>

            <div>
                <label for="">密&nbsp;&nbsp;&nbsp;码:</label>
                <input type="password" id="pswdinput">
            </div>
            <div style="display: flex;">
                <label for="" style="margin-left:   40px;">验证码:</label>
                <input type="text" style="width: 30%;" id="yzminput">
                <input type="button" value="获取验证码" style="margin-left: 18px;">
            </div>
            <div>
                <input type="button" value="取消" style="background-color: deepskyblue;">
                <input type="button" value="确认" onclick="login()" style="background-color: coral;">
            </div>

        </form>
    </div>